<template>
	<view class="content">
		<view class="father" v-for="(item,index) in count" :key="item.id">
			<view class="one" :class="actives === index ? 'active': ''">
				<view class="son1"></view>
				<view class="son2" @touchstart="starts(index,$event)" @touchend="ends(index,$event)">
					{{index}}{{item.text}}
				</view>
			</view>
			<text :class="actives === index ? 'texTentersActive': ''" class="hover-stop-propagation" @click="del(index)">删除</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: [{
						id: 0,
						text: "cz"
					},
					{
						id: 1,
						text: "宇宙"
					},
					{
						id: 2,
						text: "好人"
					},
					{
						id: 3,
						text: "cz"
					},
					{
						id: 4,
						text: "看看"
					},
					{
						id: 5,
						text: "是的吧"
					},
					{
						id: 6,
						text: "来到内"
					}
				],
				actives: null,
				startsX: null,
				movesX: null,
				endsX: null,
			}
		},
		onLoad() {},
		methods: {
			starts(index, event) {
				this.startsX = event.changedTouches[0].pageX;
			},
			ends(index, event) {
				console.log(`魔炮了`);
				if (this.startsX - event.changedTouches[0].pageX > 0) {
					this.actives = index;
				} else {
					this.actives = null;
				};
			},
			del(index) {
				this.count.splice(index, 1);
				this.actives = null;
				return false;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.father {
		overflow: hidden;
		position: relative;
	}

	.father:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.one {
		width: 750rpx;
		height: 80rpx;
		background-color: pink;
		display: flex;
	}

	.son1,
	.son2 {
		height: 100%;
	}

	.son1 {
		flex: 1;
		background-color: red;
	}

	.son2 {
		flex: 2;
		background-color: #3F536E;
	}

	.father>text {
		width: 150rpx;
		height: 100%;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		right: -150rpx;
		top: 0;
		font-size: 40rpx;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 6rpx;
	}

	@keyframes enters {
		to {
			transform: translateX(-15%);
		}
	}

	.active {
		animation: enters .1s ease;
		animation-fill-mode: forwards;
	}

	@keyframes texTenters {
		to {
			transform: translateX(-100%);
		}
	}

	.texTentersActive {
		animation: texTenters .1s ease;
		animation-fill-mode: forwards;
	}
</style>
